<!--
  @Description:方案详情
  @Author:zqy
  @Date:2021-09-22 17:21:07
  @Last Modified by:zqy
  @Last Modified time:2021-09-22 17:21:07
-->
<template>
  <Visible v-model="currentAnchor" :anchors="anchors">
    <div class="whole-detail">
      <detail-header id="hidden" />
      <AnchorNav ref="anchorNav" v-model="currentAnchor" :anchors="anchors" />
      <div class="scheme-swiper">
        <RoamBtn :roam-url="detail.panoramaUrl" class="view-third" />
        <SwipePlay v-model="currentIndex" preview :host="ADS_STATIC_PATH" :list="swipeList" fit="cover" />
      </div>
      <Slide @left="leftHandle" @right="rightHandle">
        <div class="content">
          <div id="descWhole" class="summary">
            <ProductName :name="detail.programmeName" style="padding-top:0" />
            <div class="tags">
              <template v-for="(p,i) in labelBtn">
                <Tag v-if="p" :key="i" :label="p" button />
              </template>
            </div>
            <div class="standard">
              <div v-for="(item,index) in params" :key="index" class="item-con">
                <div class="name">{{ item.label }}</div>
                <div class="info">{{ item.value || '--' }}</div>
              </div>
            </div>
          </div>
          <div class="desc">
            <Card v-if="isShowCustomerNeeds">
              <CustomerNeeds :text="detail.customerNeeds" style="margin-top:-20px" />
              <SwipePreviewImage v-if="detail.programmeExplainUrl" :host="ADS_STATIC_PATH" :list="[detail.programmeExplainUrl]" />
            </Card>
            <Card>
              <DesingConcept :text="detail.designExplain" style="margin-top:-20px" />
            </Card>
            <Card id="spaceDetail" title="空间详情">
              <div v-for="(l,i) in spaceList" :key="i">
                <p class="title name">{{ l.secondSpaceType }}</p>
                <div v-if="l.designExplain && l.designExplain.length" class="dc-text" v-html="l.designExplain " />
                <template v-if="l.picList &&l.picList.length">
                  <SwipePreviewImage
                    :host="ADS_STATIC_PATH"
                    :list="l.picList"
                    :roam-url="l.panoramaUrl"
                  />
                  <template v-if="l.secondSpaceType!='方案户型'">
                    <div v-if="detail.programmeTypeCode !== 'Product' || (l.productDTOS && l.productDTOS.length)" class="detail-content">
                      <div class="btn-view-more" @click="proDetailHandle(l)">
                        <span>查看设计详情</span>
                        <img v-if="!l.bool" class="icon" src="@/assets/sort/icon_down.png">
                        <img v-else class="icon" src="@/assets/sort/icon_on.png">
                      </div>
                      <template v-if="l.bool">
                        <div v-if="detail.programmeTypeCode !== 'Product'" class="dc-area">
                          {{ detail.programmeTypeCode !== 'New' && detail.programmeTypeCode!== 'Package' ? l.seriesId :'' }} {{ l.singleSpaceArea }}{{ l.singleSpaceArea ? 'm²' : '' }}
                        </div>
                        <div v-if="l.productDTOS && l.productDTOS.length" class="dc-main">
                          <div class="dc-label">产品详情</div>
                          <div v-for="(items,index) in l.productDTOS " :key="index" class="dc-content">
                            <b v-if="items.categoryName">{{ items.categoryName }}：</b>                        『
                            <span v-if="items.cabinetSize">尺寸：{{ items.cabinetSize }}mm </span>
                            <span v-if="items.cabinetArea"> 面积：{{ items.cabinetArea }}m² </span>
                            <template v-if="detail.programmeTypeCode !== 'Product'">
                              <span v-if="items.cabinetColorName"> 柜体色板：{{ items.cabinetColorName }} </span>
                              <span v-if="items.doorColorName"> 门板色板：{{ items.doorColorName }} </span>
                              <span v-if="items.doorTechnology"> 门板工艺：{{ items.doorTechnology }}</span>
                            </template>
                            』
                          </div>
                        </div>
                      </template>
                    </div>
                  </template>
                </template>
              </div>
            </Card>
            <Card id="recommendProd" class="desc-item" title="推荐">
              <Recommend :host="ADS_STATIC_PATH" :list="recommendList" @click="clickRecommendHandle" />
            </Card>
          </div>
        </div>
      </Slide>
    </div>
  </Visible>
</template>
<script>
import SwipePlay from '@/components/SwipePlay'
import ProductName from '@/components/ProductName'
import Card from '@/components/Card'
// import ParamTable from '@/components/ParamTable'
import AnchorNav from '@/components/AnchorNav'
import Slide from '@/components/Slide'
import Recommend from '@/components/Recommend'
import SwipePreviewImage from '@/components/SwipePreviewImage'
import DesingConcept from '@/components/DesingConcept'
import CustomerNeeds from '@/components/CustomerNeeds'
import Tag from '@/components/Tag'
import Visible from '@/components/Visible'
import RoamBtn from '@/components/RoamBtn'
import DetailMixin from '../mixins/detail'
export default {
  name: 'SchemeDetail',
  components: {
    SwipePlay,
    ProductName,
    Card,
    // ParamTable,
    DesingConcept,
    CustomerNeeds,
    Tag,
    AnchorNav,
    Slide,
    Recommend,
    SwipePreviewImage,
    Visible,
    RoamBtn
  },
  mixins: [DetailMixin],
  data() {
    return {
      ADS_STATIC_PATH: `${process.env.VUE_APP_ADS_STATIC}`
    }
  },
  created() {

  },
  methods: {
    // 单击推荐商品
    clickRecommendHandle(item) {
      this.$router.push({ name: 'SchemeDetail', params: { id: item.id }})
    }
  }
}
</script>
<style lang="less" scoped>
.whole-detail{
  position: relative;
  .content {
    // padding-top: 5px;
    .summary{
      padding: 15px 12px;
      background-color: #fff;
      .img-tag{
        // width: 54px;
        height: 16px;
      }
      .tags{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        /* &>*:not(:first-child){
          margin-left: 5px;
        } */
        .tag{
          margin-left: 5px;
          margin-bottom: 5px;
        }
        // @media screen and (max-width: 500px) {
        // }
        // @media screen and (min-width: 510px) {
        //   &>:not(:first-child){
        //     margin-left: 45px;
        //   }
        // }
      }
    }
    .cell-list{
      margin: 10px 0;
      padding: 5px 0;
      background-color: #fff;
    }
    .desc{
      // padding-bottom: 60px;
      & .desc-item{
        margin-top: 10px;
      }
    }
    .title{
      color: #333;
      font-size: 14px;
      font-weight: 600;
      padding-bottom: 5px;
    }
    .name{
      padding: 10px 0;
      text-align: center;
    }
    .dsg-des{
      padding: 10px 0;
      .content{
        color: #999;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        text-indent: 2em;
      }
    }
  }
}
.scheme-swiper{
  position: relative;
  /deep/ .wrap{
    height: calc(100vw * 0.747) !important;
  }
  .view-third{
    position: absolute;
    left: 50%;
    top: 50%;
    z-index:9;
    transform: translate(-50%,-50%);
    padding: 6px 12px;
    border-radius: 24px;
    /deep/img{
      width: 18px;
      height: 18px;
    }
  }
}
.standard{
  width: 100%;
  padding: 10px 0;
  background: #FAFAFA;
  display: flex;
  border-radius: 2px;
  .item-con{
    width: 33%;
    height: 100%;
    position: relative;
  }
  .item-con:nth-of-type(3)::before{
    display: none;
  }
  .item-con::before{
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 30px;
    background: #EEEEEE;
  }
  .name{
    text-align: center;
    height: 16px;
    font-size: 12px;
    font-weight: 400;
    color: #888888;
    line-height: 16px;
    letter-spacing: 1px;
  }
  .info{
    text-align: center;
    margin-top: 10px;
    height: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
    letter-spacing: 1px;
  }
}

.dc-text{
  color: #333;
  font-size: 14px;
  line-height: 28px;
  margin-bottom: 10px;
}
.detail-content{
  margin-top: 10px;
  .btn-view-more{
    cursor: pointer;
    width: 112px;
    height: 26px;
    background: #F5F6F7;
    border-radius: 2px;
    margin: 0 auto ;
    display: flex;
    justify-content: center;
    align-items: center;
    .icon{
      width: 10px;
      height: 6px;
      margin-left: 5px;
    }
  }
  .dc-area{
    margin-top: 10px;
    color: #555555;
    font-size: 12px;
    line-height: 1;
    margin-bottom: 10px;
    text-align: center;
  }
  .dc-main{
    margin-top: 10px;
    .dc-label{
      font-size: 12px;
      font-weight: bold;
      color: #333333;
      letter-spacing: 1px;
      text-align: center;
      margin-bottom: 10px;
    }
    .dc-content{
      font-size: 12px;
      color: #999999;
      line-height: 22px;
      letter-spacing: 1px;
      margin-bottom: 10px;
      b{
        color: #333;
        font-weight: bold;
      }
    }
  }
}

</style>
